<!DOCTYPE html>
<html class="no-js"  lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- META DATA -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!--font-family-->
    <link href="https://fonts.googleapis.com/css?family=Rufina:400,700" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">

    <!-- TITLE OF SITE -->
    <title>Travel</title>

    <!-- favicon img -->
    <link href="assets/logo/favicon.png" rel="shortcut icon" type="image/icon">

    <!--font-awesome.min.css-->
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">

    <!--animate.css-->
    <link href="assets/css/animate.css" rel="stylesheet">

    <!--hover.css-->
    <link href="assets/css/hover-min.css" rel="stylesheet">

    <!--datepicker.css-->
    <link href="assets/css/datepicker.css" rel="stylesheet">

    <!--owl.carousel.css-->
    <link href="assets/css/owl.carousel.min.css" rel="stylesheet">
    <link href="assets/css/owl.theme.default.min.css" rel="stylesheet">

    <!-- range css-->
    <link href="assets/css/jquery-ui.min.css" rel="stylesheet">

    <!--bootstrap.min.css-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- bootsnav -->
    <link href="assets/css/bootsnav.css" rel="stylesheet">

    <!--style.css-->
    <link href="assets/css/style.css" rel="stylesheet">

    <!--responsive.css-->
    <link href="assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<div class="header-area" style="width: 1216px; bottom: 0px; position: absolute;">
    <div class="container">
        <div class="row">
            <div class="col-sm-2">
                <div class="logo">
                    <a href="index.html">
                        tour<span>Nest</span>
                    </a>
                </div><!-- /.logo-->
            </div><!-- /.col-->
            <div class="col-sm-10">
                <div class="main-menu">

                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
                            <i class="fa fa-bars"></i>
                        </button><!-- / button-->
                    </div><!-- /.navbar-header-->
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="smooth-menu"><a href="#home">home</a></li>
                            <li class="smooth-menu"><a href="#gallery">Destination</a></li>
                            <li class="smooth-menu"><a href="#pack">Packages </a></li>
                            <li class="smooth-menu"><a href="#spo">Special Offers</a></li>
                            <li class="smooth-menu"><a href="#blog">blog</a></li>
                            <li class="smooth-menu"><a href="#subs">subscription</a></li>
                            <li>
                                <button class="book-btn">book now
                                </button>
                            </li><!--/.project-btn-->
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.main-menu-->
            </div><!-- /.col-->
        </div><!-- /.row -->
        <div class="home-border"></div><!-- /.home-border-->
    </div><!-- /.container-->
</div>

<section class="about-us" id="home">
    <div class="container">
        <div class="about-us-content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="single-about-us">
                        <div class="about-us-txt">
                            <h2 class="animated fadeInUp" style="opacity: 0;">
                                成都银河王朝大酒店
                            </h2>
                            <div class="about-btn">
                                <button class="about-view animated fadeInDown" style="opacity: 0;">
                                    explore now
                                </button>
                            </div><!--/.about-btn-->
                        </div><!--/.about-us-txt-->
                    </div><!--/.single-about-us-->
                </div><!--/.col-->
                <div class="col-sm-0">
                    <div class="single-about-us">

                    </div><!--/.single-about-us-->
                </div><!--/.col-->
            </div><!--/.row-->
        </div><!--/.about-us-content-->
    </div><!--/.container-->

</section>











<div style="width: 70%; margin: auto;">
    <div class="htl_room_txt text_3l" id="htlDes" style="height: auto;">
        <p>
            2019年开业&nbsp;&nbsp;40间房&nbsp;&nbsp;
            <span id="J_realContact" style="color:#0066cc;cursor:pointer;">联系方式 18048626686</span>
        </p>
        <div style="display:none">
            <div class="pop_qualification" id="J_hotelLisenceImgBox" style="position: relative;">
                <span class="close" id="J_hotelLisenceImgBoxClose">×</span>

            </div>
        </div>
        <br>
        <span id="ctl00_MainContentPlaceHolder_hotelDetailInfo_lbDesc" itemprop="description">　下榻成都西藏饭店，感受成都的独特魅力。
					不论是商务人士，还是观光游客，都可以尽情享受酒店内的设施和服务。 秉承“顾客至上”的服务理念，成都西藏饭店的工作人员将为您提供最体贴入微的服务。 客房设计极其舒适，装饰优雅，此外还配备了众多便捷设施，部分客房还配有平板电视,
					地毯, 衣架, 免费茶水, 床单等。 酒店内设多种娱乐设施。 成都西藏饭店地理位置便捷，内部装饰令人倍感舒适，是游览成都时的理想住宿选择。
				</span>
        <p></p>
    </div>



<div class="tab-para">

    <div class="row">
    <form action="/showRoom" method="post" >

        <div class="col-lg-2 col-md-3 col-sm-4">
            <div class="single-tab-select-box">
                <h2>入住时间</h2>
                <div class="travel-check-icon">
<!--                    <form action="#">-->
                        <input name="startDate" class="form-control" type="text" placeholder="16-11-2019" data-toggle="datepicker">
<!--                    </form>-->
                </div><!-- /.travel-check-icon -->
            </div>
            <!--/.single-tab-select-box-->
        </div>
        <!--/.col-->

        <div class="col-lg-2 col-md-3 col-sm-4">
            <div class="single-tab-select-box">
                <h2>离开时间</h2>
                <div class="travel-check-icon">
<!--                    <form action="#">-->
                        <input name="lastDate" class="form-control" type="text" placeholder="17-11-2019" data-toggle="datepicker">
<!--                    </form>-->
                </div><!-- /.travel-check-icon -->
            </div>
            <!--/.single-tab-select-box-->
        </div>
        <!--/.col-->

        <div class="col-lg-2 col-md-1 col-sm-4">
            <div class="single-tab-select-box">
                <h2>房间数</h2>
                <div class="travel-select-icon">
                    <select class="form-control ">
                        <option value="default">1</option><!-- /.option-->
                        <option value="10">2</option><!-- /.option-->

                        <option value="15">3</option><!-- /.option-->
                        <option value="20">4</option><!-- /.option-->

                    </select><!-- /.select-->
                </div><!-- /.travel-select-icon -->
            </div>
            <!--/.single-tab-select-box-->
        </div>
        <!--/.col-->


        <div class="row" style=" float: right; margin: auto;">

            <div class="clo-sm-7">
                <div class="about-btn travel-mrt-0 pull-right">
                    <button type="submit" class="about-view travel-btn" >
                        搜索
                    </button>
                    <!--/.travel-btn-->
                </div>
                <!--/.about-btn-->
            </div>
            <!--/.col-->
        </div>
    </form>
    </div>
    <!--/.row-->



    <!--/.row-->
</div>


    <div class="box">
        <a th:if="${rooms != null}" style="display: block" >
        <table class="table table-hover">
            <tbody>
            <tr>
                <th>类型</th>
                <th>价格</th>
                <th>Date</th>
                <th>Status</th>
                <th></th>
            </tr>
            <tr th:each="room:${rooms}">
                <td th:text="${room.bed_type }"></td>
                <td th:text="${room.price }"></td>
                <td></td>
                <td></td>
                <td>
                    <span class="label label-success" th:if="${room.COUNTER>0}"  >剩余<a th:text="${room.COUNTER}"  style="color: #ffffff"></a > <a  th:href="@{/orderpay(roomId=${room.room_id})}" style="color: #ffffff">预定</a></span>
                    <span class="label label-success" th:if="${room.COUNTER<1}">剩余无</span>
                </td>
            </tr>
            </tbody>
        </table>
        </a>
    </div>
</div>




<div class="container">
    <div class="footer-content">
        <div class="row">

            <div class="col-sm-3">
                <div class="single-footer-item">
                    <div class="footer-logo">
                        <a href="index.html">
                            tour<span>Nest</span>
                        </a>
                        <p>
                            best travel agency
                        </p>
                    </div>
                </div><!--/.single-footer-item-->
            </div><!--/.col-->

            <div class="col-sm-3">
                <div class="single-footer-item">
                    <h2>link</h2>
                    <div class="single-footer-txt">
                        <p><a href="#">home</a></p>
                        <p><a href="#">destination</a></p>
                        <p><a href="#">spacial packages</a></p>
                        <p><a href="#">special offers</a></p>
                        <p><a href="#">blog</a></p>
                        <p><a href="#">contacts</a></p>
                    </div><!--/.single-footer-txt-->
                </div><!--/.single-footer-item-->

            </div><!--/.col-->

            <div class="col-sm-3">
                <div class="single-footer-item">
                    <h2>popular destination</h2>
                    <div class="single-footer-txt">
                        <p><a href="#">china</a></p>
                        <p><a href="#">venezuela</a></p>
                        <p><a href="#">brazil</a></p>
                        <p><a href="#">australia</a></p>
                        <p><a href="#">london</a></p>
                    </div><!--/.single-footer-txt-->
                </div><!--/.single-footer-item-->
            </div><!--/.col-->

            <div class="col-sm-3">
                <div class="single-footer-item text-center">
                    <h2 class="text-left">contacts</h2>
                    <div class="single-footer-txt text-left">
                        <p>+1 (300) 1234 6543</p>
                        <p class="foot-email"><a href="#">info@tnest.com</a></p>
                        <p>North Warnner Park 336/A</p>
                        <p>Newyork, USA</p>
                    </div><!--/.single-footer-txt-->
                </div><!--/.single-footer-item-->
            </div><!--/.col-->

        </div><!--/.row-->

    </div><!--/.footer-content-->
    <hr>
    <div class="foot-icons ">
        <ul class="footer-social-links list-inline list-unstyled">
            <li><a class="foot-icon-bg-1" href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
            <li><a class="foot-icon-bg-2" href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
            <li><a class="foot-icon-bg-3" href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
        </ul>
        <p>© 2017 <a href="#">ThemeSINE</a>. All Right Reserved. More Templates <a title="模板之家" href="http://www.cssmoban.com/" target="_blank">模板之家</a> - Collect from <a title="网页模板" href="http://www.cssmoban.com/" target="_blank">网页模板</a></p>

    </div><!--/.foot-icons-->
    <div id="scroll-Top">
        <i title="" class="fa fa-angle-double-up return-to-top" id="scroll-top" aria-hidden="true" style="display: block;" data-toggle="tooltip" data-original-title="Back to Top" data-placement="top"></i>
    </div><!--/.scroll-Top-->
</div>





<script src="assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

<!--modernizr.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>


<!--bootstrap.min.js-->
<script src="assets/js/bootstrap.min.js"></script>

<!-- bootsnav js -->
<script src="assets/js/bootsnav.js"></script>

<!-- jquery.filterizr.min.js -->
<script src="assets/js/jquery.filterizr.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<!--jquery-ui.min.js-->
<script src="assets/js/jquery-ui.min.js"></script>

<!-- counter js -->
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>

<!--owl.carousel.js-->
<script src="assets/js/owl.carousel.min.js"></script>

<!-- jquery.sticky.js -->
<script src="assets/js/jquery.sticky.js"></script>

<!--datepicker.js-->
<script src="assets/js/datepicker.js"></script>

<!--Custom JS-->
<script src="assets/js/custom.js"></script>

<!--search.js-->
<script src="assets/js/search.js"></script>
<script src="assets/js/ple_date.js"></script>
</body>
</html>
